import React, { useEffect } from 'react';
import Clock from './Clock';

interface ILabelledValue {
    label: string
}

interface ISquareConfig {
    color?: string; // 可选属性
    width: number;
}

interface IPointConfig {
    readonly x: number;
    readonly y: number;
}

const InterfaceInfo = () => {

    const baseIntro = (labelObj: ILabelledValue) => {
        console.log(labelObj.label)
        const p1: IPointConfig = {x: 10, y: 10}
        console.log(p1)
    }

    const initClock = () => {
        const clock = new Clock(10, 10);
        clock.setTime(new Date())
        console.log(clock.getCurrentTime())
    }

    const initSquare = (config: ISquareConfig): {color: string; area: number} => {
        const newSquare = {color: 'white', area: 100};
        console.log(config)
        if(config.color){
            newSquare.color = config.color
        }
        if(config.width){
            newSquare.area = config.width * config.width;
        }
        return newSquare
    }

    useEffect(() => {
        const obj = {label: 'str'}
        baseIntro(obj)

        const sq = { width: 100, k: 'sh' }
        const sq1 = initSquare(sq)
        console.log(sq1)
        initClock()
    }, [])
    return <div>Interface</div>
}

export default InterfaceInfo